<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习1</title>
     <script src="https://unpkg.com/vue@3"> </script>
</head>
<body>
    <div id="app">
        <h1>综合练习1</h1>
         <input type="checkbox" v-model="tog">是否会员
         <div v-if="tog!=false">
            <select name="" id="" v-model="ss">
                <option value="黑铁" >黑铁会员</option>
                <option value="翡翠" >翡翠会员</option>
                <option value="超级" >超级会员</option>
            </select>
         </div>
        <br>
         数量: <input type="text" v-model="a1" ><br>
         单价: <input   @keydown.enter="calculate" type="text" v-model="a2" ><br>

         <div v-if="a3">
            尊敬的{{ss}}会员,你购买的数量是{{a1}},单价是{{a2}},折扣是{{dis}},总价是{{total}}.
         </div>
    </div>
</body>
</html>
<script>
    const connApp = Vue.createApp({
        data() {
            return {
                tog:false,
                ss:'',
                a1:'',
                a2:'',
                a3:false,
                dis:1,
            total: 0}

            },
            methods: {
                  calculate() {
                    if (this.tog) {
                        switch(this.ss) {
                            case '黑铁': this.dis = 0.95; break;
                            case '翡翠': this.dis = 0.9; break;
                            case '超级': this.dis = 0.8; break;
                             default: this.dis = 1;      
                        }
                    } else {
                        this.dis = 1;
                        
                    }
                    const quantity = Number(this.a1) || 0;
                    const price = Number(this.a2) || 0;
                    this.total = quantity * price * this.dis;
                    this.a3 = true;
                }
            },
    }).mount("#app")
</script>